import React, { useState } from "react";
import "./style.css";
import { Code } from "../../Code";
import { Modal } from "../../Modal";
export default function Index() {
  const [anime3, setAnime3] = useState(false);
  const [anime3a, setAnime3a] = useState(false);
  const [anime4, setAnime4] = useState(false);
  return (
    <>
      <div className="page column">
        <div className="sub-title">按类型</div>
        <div className="cover">
          <div className="card anime-3" onClick={() => setAnime3(true)}>
            <div
              className="anime-3a"
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                setAnime3a(true);
              }}
            ></div>
            逐帧动画
          </div>
          <div className="card anime-4" onClick={() => setAnime4(true)}>
            <div className="anime-4a"></div>
            补间动画
          </div>
        </div>
      </div>
      {anime3 && <Anime3Code onClose={() => setAnime3(false)} />}
      {anime3a && <Anime3aCode onClose={() => setAnime3a(false)} />}
      {anime4 && <Anime4Code onClose={() => setAnime4(false)} />}
    </>
  );
}
function Anime3Code(props) {
  return (
    <Modal onClose={props.onClose}>
      <Code lang="css">
        {`@keyframes real-see-anime {
  0.00%{
    background-position: -0px 0;
  }
  0.91%{
    background-position: -48px 0;
  }
  1.82%{
    background-position: -96px 0;
  }
  2.73%{
    background-position: -144px 0;
  }
  3.64%{
    background-position: -192px 0;
  }
  4.55%{
    background-position: -240px 0;
  }
  5.45%{
    background-position: -288px 0;
  }
  ...
}`}
      </Code>
      <div className="cover">
        <Code lang="html">{`<div className="anime-3a"></div>`}</Code>

        <Code lang="css">
          {`.anime-3a {
  top                : 10px;
  width              : 48px;
  height             : 48px;
  background-image   : url(./realsee_anime.png);
  position           : absolute;
  background-size    : 2640px 48px;
  background-position: 0 0;
  animation          : real-see-anime 4s steps(1, start) infinite;
  background-repeat  : no-repeat;
}`}
        </Code>
        <div className="anime-3-background"></div>
      </div>
    </Modal>
  );
}
function Anime3aCode(props) {
  return (
    <Modal onClose={props.onClose}>
      <Code lang="js">
        {`const step = 100 / 55 / 2;
const width = 48;
const cssAnimeClassText = \`
  @keyframes real-see-anime {
    \${Array.from({ length: 55 }, (_, index) => {
      return \`\${index * step}%{
        background-position: -\${index * width}px 0;
      }\`;
    }).join("\n")}
  }
\`;
const style = document.createElement("style");
style.innerHTML = cssAnimeClassText;
style.id = "realsee-anime";
document.getElementsByTagName("HEAD").item(0).appendChild(style);
`}
      </Code>
    </Modal>
  );
}
function Anime4Code(props) {
  return (
    <Modal onClose={props.onClose}>
      <Code lang="jsx">
        {`<div className="card anime-4" onClick={() => setAnime4(true)}>
  <div className="anime-4a"></div>
  补间动画
</div>`}
      </Code>
      <Code lang="css">{`.anime-4a {
  position        : absolute;
  width           : 10px;
  height          : 10px;
  background-color: #36cfc9;
  animation       : anime-4a 5s ease infinite;
}
@keyframes anime-4a {

  0%,
  100% {
    left: 50%;
    top : 20%;

  }

  33.3% {
    left            : 80%;
    top             : 80%;
    background-color: #1890ff;
  }

  66.6% {
    left            : 20%;
    top             : 80%;
    background-color: #fa541c;
  }
}`}</Code>
    </Modal>
  );
}

const step = 100 / 55 / 2;
const width = 48;
const cssAnimeClassText = `
@keyframes real-see-anime {
  ${Array.from({ length: 55 }, (_, index) => {
    return `${(index * step).toFixed(2)}%{
  background-position: -${index * width}px 0;
}`;
  }).join("\n")}
}
`;
const style = document.createElement("style");
style.innerHTML = cssAnimeClassText;
style.id = "realsee-anime";
document.getElementsByTagName("HEAD").item(0).appendChild(style);
